<template>
    <div class="breadcrumb">
        <ul class="breadcrumb-box">
            <li v-for="(item, index) in brumblist" :key="index">
                <router-link :to="item.path">{{item.meta.breadcrumbName}}</router-link>
                <span class="separator" v-if="index !== brumblist.length-1">{{separator}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        created () {
            this.getBreadcrumb();
        },
        data () {
            return {
                title: '',  // 页面标题
                brumblist: '' // 路由集合
            };
        },
        props: ['separator'],
        methods: {
            getBreadcrumb () {
                this.brumblist = this.$route.matched;
                this.$route.matched.forEach((item, index) => {
                    // 判断父级路由是否为空字符串或者meta是否为首页,直接复写路径到根目录
                    // 后面的就是判断路由和当前遍历的项目是否一致,是的话把标题的值给上
                    item.meta.breadcrumbName === '首页' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.breadcrumbName : '';
                });
            }
        },
        watch: {
            $route () {
                this.getBreadcrumb();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .breadcrumb {
        overflow: hidden;
        .breadcrumb-box {
            padding: 0;
            height: 40px;
            line-height:40px;
            clear: both;
            li {
                float: left;
                border-right: 1px solid #eee;
                padding:0 10px;
                border-bottom:1px solid #eee;
            }
            li:last-child{

            }
            a {
                text-decoration: none;
                color: #333;
                &:hover {
                    color: #20a0ff;
                    text-decoration: underline;
                }
            }
        }
    }
</style>
